<template>
  <van-search v-model="keywords" placeholder="搜索地点/景点/游记" />
  <van-grid :column-num="5">
    <van-grid-item v-for="item in gridArr" :key="item.id" :icon="item.icon" :text="item.text" />
  </van-grid>
  <p class="recommend">推荐</p>
  <div class="Mainstream-view global-display global-a-items" v-if="recommendArr.length > 0">
    <!-- 左边 -->
		<div class="Mainstream-left">
      <img class="Mainstream-left-image" :src="recommendArr[activeIndex].cover_image.url">
      <div class="Mainstream-bottom">
        <p class="m-title text-show">{{recommendArr[activeIndex].title}}</p>
        <div class="global-display global-a-items" v-for="(item,index) in recommendArr[activeIndex].author_data">
          <img :src="item.avatarUrl">
          <p class="m-name">{{item.nickname}}</p>
          <p class="m-name text-show dis-flex">我在&nbsp;{{recommendArr[activeIndex].address}}</p>
        </div>
      </div>
    </div>
		<!-- 右边 -->
    <div class="Mainstream-right global-display global-f-direction">
			<img v-for="(item,index) in recommendArr" :key="index" :src="item.cover_image.url" :class="{img_border:index == activeIndex}" @click="itemClick(index)"
			>
    </div>
	</div>

  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    :immediate-check="false"
    offset="100"
    @load="onLoad"
  >
    <card :userTravels="userTravels" />
  </van-list>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "@/api/request";
import card from "@/components/cardFlow/index.vue";


const keywords = ref("");
const userTravels = ref([]);
const loading = ref(false);
const gridArr = ref([]);
const recommendArr = ref([]);
const activeIndex = ref(0)

const load = () => {
}

onMounted(async (res) => {
  let result = await http.get("/recomm_travel");
  gridArr.value = result.data.category_nav;
  recommendArr.value = result.data.recomm_travel;
})

const itemClick = (index) => {
  activeIndex.value = index;
}

</script>

<style scoped>
.index-search {
  --van-search-content-background: #ffffff !important;
  --van-search-background: #f8f8f8 !important;
  --van-grid-item-content-background: #f8f8f8 !important;
  --van-grid-item-text-color: #7f7f7f !important;
}
.recommend {
  font-size: 17px;
  font-weight: bold;
  margin: 10px;
}
.Mainstream-view {
  display: flex;
  margin: 10px;
  height: 300px;
  border-radius: 5px;
  background-color: #7d89b9;
  overflow: hidden;
}
.Mainstream-left {
  width: 70%;
  position: relative;
  flex: 1;
  height: 300px;
}
.Mainstream-left-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.Mainstream-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  padding: 0 0 10px 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.Mainstream-bottom img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.m-title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
.m-name {
  padding-left: 8px;
  font-size: 12px;
}
.dis-flex {
  flex: 1;
}
.Mainstream-right {
  width: 20%;
  gap: 8px;
  margin: 0 8px;
}
.Mainstream-right img {
  display: block;
  width: 100%;
  height: 25%;
  object-fit: cover;
  border-radius: 3px;
}
.img_border {
  border: 2px solid yellow;
  box-sizing: border-box;
}
</style>
